<template>
  <div class="seamless-scroll-container" dir="ltr">
    <vue3-seamless-scroll :list="gameArr" :step="itemWidth" direction="left" :hover-pause="true" class="seamless-scroll">
      <div v-for="item in gameArr" class="scroll-item div6" :style="{backgroundImage: 'url('+ item.image +')' }" :key="item.id" @click="goGame(item.id)">
        <div class="big">
          <div class="text">{{item.game_name}}</div>
        </div>
        </div>
    </vue3-seamless-scroll>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue"
import { Vue3SeamlessScroll } from "vue3-seamless-scroll"
import { gameList } from "../home.service"
import { useRouter } from "vue-router"
const router = useRouter()

const itemWidth = ref(1) // 每个滚动项的宽度，根据你的设计进行调整
const gameArr = ref([])
const getdata = () => {
  gameList().then((res) => {
    gameArr.value = res.data
  })
}
getdata()

const goGame = (id: string) => {
  router.push({ path: "/game", query: { id: id } })
}
</script>

<style scoped>
.div6{
    border: 5px solid;
    border-image: linear-gradient(45deg, gold, deeppink) 1;
    clip-path: inset(0px round 5px);
    animation: div6Ani 3s infinite linear;
    filter: hue-rotate(360deg);
}
@keyframes div6Ani {
    0% {
        filter: hue-rotate(0deg);
    }
    100% {
        filter: hue-rorate(360deg);
    }
}
.seamless-scroll-container {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  background-color: #000;
}

.seamless-scroll {
  height: 290px; /* 根据需要设置高度 */
}

.scroll-item {
  display: inline-block;
  width: 290px; /* 与 itemWidth 保持一致 */
  height: 290px;
  text-align: center;
  margin-right: 20px; /* 如果需要的话，添加间距 */
  background-size: cover;
}
.big {
  position: relative;
  height: 100%;
}
.text {
  position: absolute;
  bottom: 30px;
  color: #fff;
  line-height: 50px;
  font-size: 20px;
  font-weight: 600;
  text-align: center;
  left: 0;
  right: 0;
}
</style>